import {
  createRouter,
  createWebHashHistory, // 创建hash模式
  createWebHistory, // 创建history模式
} from "vue-router";

// import Home from "../views/Home/index.vue";
// import About from "../views/About/index.vue";
// import Detail from "../views/Detail/index.vue";

// 路由懒加载
// 原理：1. 将路由组件进行单独打包，单独打包成一个js文件 2. 按需加载路由组件
const Home = () => {
  return import("../views/Home/index.vue");
};
const About = () => import("../views/About/index.vue");
const Detail = () => import("../views/Detail/index.vue");

const router = createRouter({
  // 路由模式
  history: createWebHistory(),
  // 路由配置项
  routes: [
    {
      path: "/home",
      component: Home,
      name: "Home", // 命名路由
      meta: {
        title: "首页",
      },
    },
    {
      path: "/about",
      component: About,
      name: "About",
      meta: {
        title: "关于",
      },
    },
    {
      // params参数必须进行配置，占位符
      path: "/detail/:id",
      component: Detail,
      name: "Detail",
      meta: {
        title: "详情",
      },
    },
    {
      // https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E6%8D%95%E8%8E%B7%E6%89%80%E6%9C%89%E8%B7%AF%E7%94%B1%E6%88%96-404-not-found-%E8%B7%AF%E7%94%B1
      // 匹配任意地址
      path: "/:pathMatch(.*)*",
      redirect: "/home",
    },
  ],
});

/*
  路由导航守卫
    1. 全局路由导航守卫
      **beforeEach** 
        权限管理/控制（登录了可以访问指定页面，没有登录不能访问）
      beforeResolve
      afterEach
    2. 路由独享守卫
    3. 组件独享守卫
*/

router.beforeEach((to, from, next) => {
  /*
    from 代表从哪来路由对象（route）
    to   代表去哪里路由对象（route）
    next 函数，一定要调用
      next() 放行，去to对应路由
      next('/xxx') / next({ path: '/xxx' }) 去传参的指定路由
  */
  console.log(to, from);
});

export default router;
